var ec2ui_MonitoringTreeView = {
   
    register: function() {
        if (!this.registered) {
            this.registered = true;
            ec2ui_model.registerInterest(this, 'monitoring');
            
        }
    },
    
    test : function(){
        var selecteditem = document.getElementById("monitoring.timerange").value;
        if(selecteditem == "Last 6 Hour"){
           var starttime = "2011-07-14T02:15:18.000Z";
           var endtime  = "2011-07-14T16:15:18.000Z"
           var instance = null;
           ec2ui_session.controller.GetMetricStatistics(starttime,endtime,instance); 
        }
    },
    
    selectedMetric : function(){
        var time = document.getElementById("monitoring.timerange").value;
        var instance = document.getElementById("ec2ui.monitoring.Instancelist").value;
        if(time == "Last 6 Hour"){
           var starttime = "2011-07-14T02:15:18.000Z";
           var endtime  = "2011-07-14T16:15:18.000Z";
        }else{
           var starttime = null;
           var endtime = null;
        }
        if(instance == ""){
            var instance = null;
        }
        ec2ui_session.controller.GetMetricStatistics(starttime,endtime,instance);
    },
    
    selectedinstance : function(){
        var instance = document.getElementById("ec2ui.monitoring.Instancelist").value;
        var starttime = null;
        var endtime = null;
        if(instance != ""){
            ec2ui_session.controller.GetMetricStatistics(starttime,endtime,instance); 
        }
    },
    
    invalidate: function() {
        alert("Invalidate");
    },
    
    instancelist : function(){
        var InstanceMenu = document.getElementById("ec2ui.monitoring.Instancelist");
        InstanceMenu.appendItem("Select an Instance", null);
        var Instance = ec2ui_session.model.getInstances();
        for (var i in Instance) {
            InstanceMenu.appendItem(Instance[i].id , Instance[i].id);
        }
        InstanceMenu.selectedIndex = 0;
    },

    refresh: function() {
        this.instancelist();
        this.init();
    },
    
    init : function(){
        var Monitor = ec2ui_session.model.getMonitoring();
        var monitorarray = new Array();
        for (var i in Monitor) {
            var Timestamp = Monitor[i].Timestamp;
	    var Average = Monitor[i].Average;
            var data = {Time : Timestamp,Avg : Average};
            monitorarray.push(data);
        }
        var report = {x : "Time",y : "Avg",values : monitorarray};
        this.graph(report, 1000, 300)
    },

    graph :function(report, maxWidth, maxHeight){
        var data = report.values;
        var canvas = document.getElementById("graph");
        var axisBuffer = 5;
        canvas.height = maxHeight + 100;
        canvas.width = maxWidth;
        var ctx = canvas.getContext("2d");
        var width = 20;
        var buffer = 20;
        var i = 0;
        var x = buffer + axisBuffer;
        ctx.font = "bold 12px sans-serif";
        ctx.textAlign = "start";
        for (i=0;i<data.length;i++){
            ctx.fillStyle = "#ffcc00";
            ctx.fillRect(x, maxHeight - (data[i][report.y] / 2),
            width, (data[i][report.y] / 2));
            ctx.fillStyle = "#000";
            ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15);
            x += width + buffer;
        }
        // draw the horizontal axis
        ctx.moveTo(axisBuffer, maxHeight);
        ctx.lineTo(axisBuffer+maxWidth, maxHeight);
        //ctx.strokeStyle = "black";
        //ctx.stroke();
        // draw the vertical axis
        ctx.moveTo(axisBuffer,0);
        ctx.lineTo(axisBuffer,maxHeight);
        //ctx.stroke();
        // draw gridlines
        var lineSpacing = 20;
        var numLines = maxHeight/lineSpacing;
        var y = lineSpacing;
        ctx.font = "10px sans-serif #ccc";
        ctx.textBaseline = "middle";
        for (i=0;i<numLines;i++){
            ctx.strokeStyle = "rgba(0,0,0,0.25)";
            ctx.moveTo(axisBuffer, y);
            ctx.lineTo(axisBuffer + maxWidth,y);
            ctx.stroke();
            ctx.fillStyle = "rgba(0,0,0, 0.75)";
            ctx.fillText(""+(2*(maxHeight -y)), 0, y);
            y += lineSpacing;
        }

    },
     
    notifyModelChanged: function(interest) {
        this.invalidate();
    },

};

